import Vue from 'vue'
import Vuex from 'vuex'
import animation from './animation'
import compose from './compose'
import contextmenu from './contextmenu'
import copy from './copy'
import event from './event'
import layer from './layer'
import snapshot from './snapshot'
import lock from './lock'
import align from './align'
import { findIndex, forEach, get, includes } from 'lodash'
import { AREA_TYPE_ID } from '@/utils/constant'
import { format } from '@/utils/changeComponentsSizeWithScale.js'

Vue.use(Vuex)

const data = {
  state: {
    ...animation.state,
    ...compose.state,
    ...contextmenu.state,
    ...copy.state,
    ...event.state,
    ...layer.state,
    ...snapshot.state,
    ...lock.state,
    lastScale: 100, // 记录快照上次的缩放比例，用于判断是否需要更新快照
    editMode: 'edit', // 编辑器模式 edit preview
    canvasStyleData: [],
    curCanvasPageIndex: 0,
    isInEdiotr: false, // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
    componentData: [], // 画布组件数据
    curComponent: null,
    curComponentIndex: null,
    // 点击画布时是否点中组件，主要用于取消选中组件用。
    // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
    isClickComponent: false,
    rightList: true,
    isDarkMode: false,
  },
  mutations: {
    ...animation.mutations,
    ...compose.mutations,
    ...contextmenu.mutations,
    ...copy.mutations,
    ...event.mutations,
    ...layer.mutations,
    ...snapshot.mutations,
    ...lock.mutations,
    ...align.mutations,
    aceSetCanvasData(state, value) {
      state.canvasStyleData[state.curCanvasPageIndex] = value
    },
    setLastScale(state, value) {
      state.lastScale = value
    },
    // 通过json设置组件
    aceSetcurComponent(state, value) {
      const componentData = state.canvasStyleData[state.curCanvasPageIndex].componentData
      for (let i = 0; i < componentData.length; i++) {
        if (componentData[i].id === value.id) {
          componentData.splice(i, 1)
        }
      }
      componentData.push(value)
      state.curComponent = value
    },

    setClickComponentStatus(state, status) {
      state.isClickComponent = status
    },

    isShowRightList(state) {
      state.rightList = !state.rightList
    },

    toggleDarkMode(state, sateus) {
      state.isDarkMode = sateus
      state.canvasStyleData[state.curCanvasPageIndex].background = sateus ? '#817f7f' : '#fff'
      localStorage.setItem('isDarkMode', JSON.stringify(state.isDarkMode))
    },

    setEditMode(state, mode) {
      state.editMode = mode
    },

    setInEditorStatus(state, status) {
      state.isInEdiotr = status
    },

    setCanvasStyle(state, style) {
      state.canvasStyleData[state.curCanvasPageIndex] = style
    },

    setCurComponent(state, { component, index }) {
      state.curComponent = component
      state.curComponentIndex = index
    },

    setShapeStyle({ curComponent, componentData, curComponentIndex }, { top, left, width, height, rotate, padding }) {
      if (top !== undefined) componentData[curComponentIndex].top = Math.round(top)
      if (left !== undefined) componentData[curComponentIndex].left = Math.round(left)
      if (width) componentData[curComponentIndex].width = Math.round(width)
      if (padding) componentData[curComponentIndex].padding = Math.round(padding)
      if (height) componentData[curComponentIndex].height = Math.round(height)
      if (rotate) componentData[curComponentIndex].rotate = Math.round(rotate)
    },

    setShapeSingleStyle({ curComponent }, { key, value }) {
      curComponent[key] = value
    },

    setComponentData(state, componentData = []) {
      Vue.set(state, 'componentData', componentData)
    },

    addComponent(state, { component, index }) {
      if (index !== undefined) {
        state.componentData.splice(index, 0, component)
        state.canvasStyleData[state.curCanvasPageIndex].componentData = state.componentData
      } else {
        state.componentData.push(component)
        state.canvasStyleData[state.curCanvasPageIndex].componentData = state.componentData
      }
    },

    deleteComponent(state, index) {
      if (index === undefined) {
        index = state.curComponentIndex
      }

      if (index === state.curComponentIndex) {
        state.curComponentIndex = null
        state.curComponent = null
      }

      if (/\d/.test(index)) {
        state.componentData.splice(index, 1)
        state.canvasStyleData[state.curCanvasPageIndex].componentData = state.componentData
      }
      this.commit('setPageTotalTime')
    },

    addPage(state, pageInfo) {
      state.canvasStyleData.push(pageInfo)
    },

    setCurCanvasPageIndex(state, index) {
      state.curCanvasPageIndex = index
      state.componentData = get(state.canvasStyleData, `[${state.curCanvasPageIndex}].componentData`) || []
      state.curComponent = null
    },

    deletePage(state, id) {
      const index = findIndex(state.canvasStyleData, (item) => item.id === id)
      state.canvasStyleData.splice(index, 1)
      state.curCanvasPageIndex = index - 1
    },

    upPage(state, { pageData, index }) {
      const upPageData = get(state.canvasStyleData.splice(index, 1), '[0]')
      const upIndex = index - 1
      state.canvasStyleData.splice(upIndex, 0, upPageData)
      state.curCanvasPageIndex = upIndex
    },
    downPage(state, { pageData, index }) {
      const downPageData = get(state.canvasStyleData.splice(index, 1), '[0]')
      const downIndex = index + 1
      state.canvasStyleData.splice(downIndex, 0, downPageData)
      state.curCanvasPageIndex = downIndex
    },
    setPageComponentData(state, componentData) {
      state.componentData = componentData
      state.canvasStyleData[state.curCanvasPageIndex].componentData = componentData
    },
    setPageBg(state, img) {
      state.canvasStyleData[state.curCanvasPageIndex].bgImg = img
    },
    setCanvasStyleData(state, data) {
      state.canvasStyleData = data
    },
    setPageTotalTime(state) {
      const componentData = state.canvasStyleData[state.curCanvasPageIndex].componentData || []
      let componentTotalTime = 0

      forEach(componentData, (item) => {
        const {
          srcGroup = [],
          picShowTime = 0,
          picStyleInTime = 0,
          picStyleOutTime = 0,
          type = -1,
          pauseTime = 0,
        } = item

        if (includes([AREA_TYPE_ID.VIDEO, AREA_TYPE_ID.PICTURE], type)) {
          forEach(srcGroup, (child) => {
            const { picShowTime: childPicShowTime = null, time = 0 } = child
            switch (type) {
              case AREA_TYPE_ID.VIDEO:
                componentTotalTime += Number(time)
                break
              case AREA_TYPE_ID.PICTURE:
                componentTotalTime +=
                  Number(childPicShowTime || picShowTime) + Number(picStyleInTime) + Number(picStyleOutTime)
                break
            }
          })
        }

        switch (type) {
          case AREA_TYPE_ID.SUBTITLES:
            componentTotalTime += Number(pauseTime)
            break
        }
      })
      console.log('计算时长----', componentTotalTime)
      state.canvasStyleData[state.curCanvasPageIndex].pageTime = componentTotalTime
    },
    setComponentFullScreen(state) {
      const { width, height } = get(state.canvasStyleData, `[${state.curCanvasPageIndex}]`) || {}

      state.curComponent.width = format(width, state.lastScale)
      state.curComponent.height = format(height, state.lastScale)
      state.curComponent.top = 0
      state.curComponent.left = 0
    },
  },
}

export default new Vuex.Store(data)
